<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
  >
    <view class="mine-container">
      <!-- User Info Section with right arrow -->
      <view class="user-info-section" @click="navigateToProfile">
        <view class="user-header">
          <image class="user-avatar" src="@/static/user/default-avatar.jpeg" mode="aspectFill"></image>
          <view class="user-details">
            <text class="username">未来首富</text>
            <text class="vip-level">VIP3</text>
          </view>
        </view>
        <image class="arrow-icon" src="@/static/user/arrow-right.png"></image>
      </view>

      <!-- Wallet Section -->
      <view class="section wallet-section">
        <view class="section-header">
          <text class="section-title">我的钱包</text>
          <view class="transaction-details">
            <text class="section-link">交易明细</text>
            <image class="arrow-icon" src="/static/user/arrow-right.png"></image>
          </view>
        </view>
        <view class="wallet-balance-container">
          <view class="wallet-balance-column">
            <text class="balance-amount">0.96</text>
            <text class="balance-label">账户总额（元）</text>
          </view>
          <view class="wallet-balance-column">
            <text class="balance-amount">0</text>
            <text class="balance-label">今日中奖（元）</text>
          </view>
        </view>
        <view class="wallet-actions">
          <button class="wallet-btn">充值</button>
          <button class="wallet-btn">转账</button>
          <button class="wallet-btn">提款</button>
        </view>
      </view>

      <!-- Betting Records Section with red marker and right arrow -->
      <view class="section records-section" @click="navigateToBettingRecords">
        <view class="section-header">
          <view class="title-with-marker">
            <view class="red-marker"></view>
            <text class="section-title">投注记录</text>
          </view>
          <view class="section-right">
            <text class="section-link">全部记录</text>
            <image class="arrow-icon" src="/static/user/arrow-right.png"></image>
          </view>
        </view>
        <view class="record-stats">
          <view class="stat-item">
            <text class="stat-number">0</text>
            <text class="stat-label">待出票</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">0</text>
            <text class="stat-label">待开奖</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">13</text>
            <text class="stat-label">已中奖</text>
          </view>
        </view>
      </view>

      <!-- More Services Section with red marker -->
      <view class="section more-services">
        <view class="section-header">
          <view class="title-with-marker">
            <view class="red-marker"></view>
            <text class="section-title">更多服务</text>
          </view>
        </view>
        <view class="service-grid">
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0001.png"></image>
            <text>合买记录</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0002.png"></image>
            <text>追号记录</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0003.png"></image>
            <text>保存记录</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0004.png"></image>
            <text>店铺信息</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0005.png"></image>
            <text>我的红包</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0006.png"></image>
            <text>推送设置</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0007.png"></image>
            <text>账号管理</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0008.png"></image>
            <text>帮助中心</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0009.png"></image>
            <text>意见反馈</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="@/static/user/0010.png"></image>
            <text>店铺管理</text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed } from 'vue';
  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template.user);
  const isLogin = computed(() => sheep.$store('user').isLogin);

  const navigateToProfile = () => {
    uni.navigateTo({
      url: '/pages/user/profile'
    });
  };

  const navigateToBettingRecords = () => {
    uni.navigateTo({
      url: '/pages/records/list'
    });
  };

  onShow(() => {
    sheep.$store('user').updateUserData();
  });

  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {
  });
</script>

<style>
  page {
    background-color: #f5f5f5;
    padding-bottom: 100rpx;
  }

  .mine-container {
    padding-bottom: 120rpx;
  }

  /* User Info Section */
  .user-info-section {
    background-color: white;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  .user-header {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 77, 79, 0.3);
  }

  .user-details {
    margin-left: 30rpx;
  }

  .username {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
    color: #333;
  }

  .vip-level {
    background-color: #FFD700;
    color: #8B7500;
    padding: 6rpx 20rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: bold;
  }

  .arrow-icon {
    width: 24rpx;
    height: 24rpx;
  }

  /* Common Section Styles */
  .section {
    background-color: white;
    border-radius: 16rpx;
    margin: 20rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  /* Wallet Section */
  .wallet-section {
    background: linear-gradient(to right, #e79273, #eb5837);
    color: white;
  }

  .wallet-section .section-header {
    color: white;
  }

  .wallet-section .section-title {
    color: white;
    font-size: 32rpx;
  }

  .wallet-section .section-link {
    color: rgba(255, 255, 255, 0.8);
  }

  .transaction-details {
    display: flex;
    align-items: center;
  }

  .wallet-section .arrow-icon {
    filter: brightness(0) invert(1);
    opacity: 0.8;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .title-with-marker {
    display: flex;
    align-items: center;
  }

  .red-marker {
    width: 8rpx;
    height: 30rpx;
    background-color: #FF4D4F;
    border-radius: 4rpx;
    margin-right: 15rpx;
  }

  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }

  .section-right {
    display: flex;
    align-items: center;
  }

  .section-link {
    font-size: 26rpx;
    color: #999;
    margin-right: 10rpx;
  }

  /* Wallet Section */
  .wallet-balance-container {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
  }

  .wallet-balance-column {
    flex: 1;
    text-align: center;
    padding: 0 10rpx;
  }

  .balance-amount {
    font-size: 48rpx;
    font-weight: bold;
    color: white;
    display: block;
  }

  .balance-label {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-top: 10rpx;
  }

  .wallet-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
  }

  .wallet-btn {
    flex: 1;
    margin: 0 10rpx;
    background-color: white;
    color: #eb5837;
    border-radius: 8rpx;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border: none;
    font-weight: bold;
  }

  /* Records Section */
  .record-stats {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .stat-item {
    flex: 1;
  }

  .stat-number {
    font-size: 36rpx;
    font-weight: bold;
    color: #FF4D4F;
    display: block;
  }

  .stat-label {
    font-size: 26rpx;
    color: #666;
    display: block;
    margin-top: 10rpx;
  }

  /* More Services Section */
  .service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 -10rpx;
  }

  .service-item {
    width: 25%;
    box-sizing: border-box;
    padding: 20rpx 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .service-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 15rpx;
  }

  /* Adjust for smaller screens if needed */
  @media (max-width: 600rpx) {
    .service-item {
      width: 33.33%;
    }
  }
</style>